<!--
 * @Date: 2025-04-02 21:38:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-13 17:07:24
 * @FilePath: /admin/vue/src/views/admin/home/index.vue
-->
<script setup lang="ts">
import { useThemeStore } from '@/stores/useThemeStore'
import Pie from './components/pie.vue'
import Bar from './components/bar.vue'
import Line from './components/line.vue'

const theme = useThemeStore()
</script>
<template>
  <n-grid :x-gap="12" :y-gap="8" :cols="2">
    <n-grid-item>
      <n-card><Pie /></n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card><Bar /></n-card>
    </n-grid-item>
    <n-grid-item :span="2">
      <n-card><Line /></n-card>
    </n-grid-item>
  </n-grid>

  <!-- <n-space>
    <n-button>Default</n-button>
    <n-button type="tertiary"> Tertiary </n-button>
    <n-button type="primary"> Primary </n-button>
    <n-button type="info"> Info </n-button>
    <n-button type="success"> Success </n-button>
    <n-button type="warning"> Warning </n-button>
    <n-button type="error"> Error </n-button>
  </n-space>
  <n-form :model="theme.otherColor">
    <NDivider>主题模式</NDivider>
    <n-form-item label="主色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.themeColor" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="信息色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.info" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="成功色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.success" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="警告色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.warning" :show-alpha="false" />
    </n-form-item>
    <n-form-item label="错误色" path="color" class="w-44">
      <n-color-picker v-model:value="theme.otherColor.error" :show-alpha="false" />
    </n-form-item>
  </n-form> -->
</template>

<style></style>
